<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>古今职业对照</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <style>
  * {
    margin: 0px;
    padding: 0px;
    list-style: none;
    box-sizing: border-box;
  }

  @font-face {
    font-family: "mykt";
    src: url('emperor/ct/hyqxt.ttf') format('truetype');

  }

  [v-cloak] {
    display: none;
  }

  .mykt {
    font-size: 60px;
    font-style: normal;
    font-weight: bold;
  }

  body {
    background: #000;

  }

  .playico {
    width: 86px;
    height: 86px;
    position: absolute;
    background: url("emperor/start.png");
    cursor: pointer;
    animation: zd .5s infinite;
  }

  @keyframes zd {
    50% {
      transform: scale(1.2);
    }

  }

  .ok {
    position: absolute;
    color: #fff;
    font-size: 46px;
  }

  #app {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }

  .win {
    width: 1200px;
    height: 693px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .wn {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .kj {
    background: url("emperor/start_box.png");
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }

  .gamebg, .gamefront {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
  }

  .gamefront-n {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    font-family: "mykt";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .gamefront-n .img {
    width: 400px;
    height: 400px;
    margin-left: 100px;
  }

  .gamefront-n .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .gamefront-n .text {
    width: calc(100% - 500px);
  }

  .gamefront-n .text .list {
    font-size: 38px;
  }

  .gamefront-n .text .list li {
    height: 80px;
    color: #fff;
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  .gamefront-n .text .list li span {
    width: 208px;
    height: 100%;
    background: url("emperor/ct/normal.png") no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .gamefront-n .text .list li i {
    color: #2fa700;
  }


  .gamefront-n .text .list li.choose span {
    background-image: url("emperor/ct/choose.png");
  }

  .gamefront-n .text .list li.zq span {
    background-image: url("emperor/ct/ok.png");
  }


  .gamebg .bg {
    width: 1100px;
    height: 600px;
    background: url(emperor/gamebg_2.jpg) #e7f4d6;
    position: absolute;
    left: 48px;
    top: 48px;
  }

  h3 {
    font-size: 56px;
  }


  .title {
    color: #fff;
    width: 420px;
    height: 40px;
    line-height: 40px;
    position: absolute;
    left: 50%;
    top: 15px;
    margin-left: -210px;
    font-size: 30px;
    text-align: center;
    font-weight: bold;
    text-shadow: 1px 1px 0px #000000;
  }


  </style>
</head>
<body>
<div id="app">
  <audio ref="audio"></audio>
  <audio src="1.mp3" ref="bg" loop></audio>
  <div class="win">
    <div class="wn">
      <div class="gamebg">
        <div class="bg"></div>
      </div>
      <div class="kj"></div>
      <div class="title">古今职业对照</div>
      <div v-show="step===1" v-cloak class="playico" @click="next"></div>
      <div v-show="step===2" v-cloak class="gamefront">
        <div class="gamefront-n">
          <div class="img"><img :src="'emperor/ct/work/'+questions[cur-1].img"></div>
          <div class="text">
            <div class="mykt">{{questions[cur-1].title}}</div>
            <ul class="list">
              <li :class="{choose:xh===choose-1,zq:xh===questions[cur-1].answer&&choose}"
                  v-for="(item,xh) in questions[cur-1].list" @click="xz(xh+1)">
                <span>{{item}}</span><i v-if="xh===questions[cur-1].answer&&choose">正确答案</i>
              </li>
            </ul>
          </div>

        </div>
      </div>
      <div v-show="step===3" class="ok" v-cloak>厉害了！！</div>
    </div>
  </div>
</div>
<script src="./gsap.min.js" type="text/javascript"></script>
<script src="./vue.min.js" type="text/javascript"></script>
<script type="text/javascript">
new Vue({
    el: '#app',
    data: {
        step: 1,
        cur: 1,//当前第几题
        choose: null,//选的答案索引
        questions: [{
            title: '"老板"古代叫什么?',
            img: '1.png',
            list: ['老豆', '东家', '头家'],
            answer: 1
        }, {
            title: '"经理"古代叫什么?',
            img: '2.png',
            list: ['东家', '账房', '掌柜'],
            answer: 2
        },{
            title: '"出纳"古代叫什么?',
            img: '3.png',
            list: ['出宫', '账房', '出恭'],
            answer: 1
        },{
            title: '"快递员"古代叫什么?',
            img: '4.png',
            list: ['镖师', '账房','掌柜'],
            answer: 0
        },{
            title: '"司机"古代叫什么?',
            img: '5.png',
            list: ['纤夫', '力夫', '司徒', '车夫'],
            answer: 3
        },{
            title: '"厨师"古代叫什么?',
            img: '6.png',
            list: ['火夫', '功夫', '大厨'],
            answer: 0
        },{
            title: '"服务员"古代叫什么?',
            img: '7.png',
            list: ['店家', '酒家', '店小二'],
            answer: 2
        },{
            title: '"演员"古代叫什么?',
            img: '8.png',
            list: ['优伶', '员外', '丑角'],
            answer: 0
        },{
            title: '"医生"古代叫什么?',
            img: '9.png',
            list: ['小生', '大郎', '郎中'],
            answer: 2
        },{
            title: '"教师"古代叫什么?',
            img: '10.png',
            list: ['夫人', '夫妻', '牧师', '夫子'],
            answer: 3
        },{
            title: '"律师"古代叫什么?',
            img: '11.png',
            list: ['老师', '讼师', '法师'],
            answer: 1
        },{
            title: '"法医"古代叫什么?',
            img: '12.png',
            list: ['司徒', '账房', '仵作'],
            answer: 2
        },{
            title: '"法官"古代叫什么?',
            img: '13.png',
            list: ['司寇', '司徒', '官人'],
            answer: 0
        },{
            title: '"中介"古代叫什么?',
            img: '14.png',
            list: ['介质', '牙人', '介绍'],
            answer: 1
        },{
            title: '"翻译"古代叫什么?',
            img: '15.png',
            list: ['仵作', '司徒', '通事'],
            answer: 2
        },{
            title: '"助产士"古代叫什么?',
            img: '16.png',
            list: ['媒婆', '稳婆', '仵作'],
            answer: 1
        },]
    },
    mounted() {

    },
    watch: {
        cur: {
            immediate: false,
            handler(value) {
                let f=document.querySelector('.gamefront-n')
                let img=f.querySelector('.img')
                let text=f.querySelector('.text')
                let mykt=text.querySelector('.mykt')
                let list=text.querySelector('.list')
                let li=list.querySelectorAll('li')
                gsap.from(img,{
                    scale:0,
                    ease:'bounce.out',
                    duration:1
                })
                gsap.from(mykt,{
                    //ease:'elastic.out(1, 0.3)',
                    y:-100,
                    opacity:0
                })
                gsap.from(li,{
                    //ease:'elastic.out(1, 0.3)',
                    y:-100,
                    opacity:0,
                    delay:.5,
                    stagger:.2
                })




            }
        },
    },
    methods: {
        clickVoice(){
            this.$refs.audio.src='click.wav'
            this.$refs.audio.play()
        },
        bgVoice(){
            this.$refs.bg.play()
        },
        next(){
            this.step=2
            this.clickVoice()
            this.bgVoice()

        },
        xz(xh) {
            this.clickVoice()
            this.choose = xh
            if (this.cur < this.questions.length)  {
                setTimeout(() => {
                    this.cur += 1
                    if (this.cur >= this.questions.length) {
                        this.cur = this.questions.length
                    }
                    this.choose = ''

                }, 2000)
            }


        }
    }
})
</script>

</body>

</html>
